<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件监听</title>
</head>
<body>
	<div id="example-1">
		<button v-on:click = "counter += 1">增加1</button>
		<p>这个按钮被点击了{{counter}}次</p>
	</div>
	<div id="example-2">
		<button v-on:click = "greet">Greet</button>
	</div>
	<div id="example-3">
		<button v-on:click = "say('hi')">Say hi</button>
		<button v-on:click = "say('what')">Say what</button>
	</div>
	<div id="example-4">
		<button v-on:click = "warn('Form cannot be submitted yet(表单不能提交).' , $event)">Submit</button>
	</div>
	<!-- 事件修饰符 -->

	<!-- 阻止单击事件冒泡 -->
	<a v-on:click.stop = "doThis"></a>
	<!-- 提交事件不再重载页面 -->
	<form v-on:submit.prevent = "onSubmit"></form>
	<!-- 修饰符可以串联 -->
	<a v-on:click.stop.prevent = "doThat"></a>
	<!-- 只有修饰符 -->
	<form v-on:submit.prevent></form>
	<!-- 添加事件侦听器时使用事件捕获模式 -->
	<div v-on:click.capture = "doThis"></div>
	<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
           <div v-on:click.self="doThat">...</div>
           <!-- 点击事件将只会触发一次     新增-->
           <a v-on:click.once="doThis"></a>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
	var example1 = new Vue({
		el: '#example-1',
		data: {
			counter:0
		}
	})

	var example2 = new Vue({
		el: '#example-2',
		data: {
			name: 'vue.js'
		},
		methods: {
			greet: function(event) {
				// this 在方法里指当前Vue实例
				alert('hello' + this.name + '!')
				// 'event' 是原生DOM 事件
				alert(event.target.tagName)
			}
		}
	})

	var example3 = new Vue({
		el: '#example-3',
		methods: {
			say: function(message) {
				alert(message)
			}
		}
	})

	var example4 = new Vue({
		el: '#example-4',
		methods: {
			warn: function(message,event) {
				if(event) event.preventDefault()
				alert(message)
			}
		}
	})
</script>
</html>